<template>
  <div class="vy-cmp-work-content-item vy-cmp-work-content-editor">
    <a-row>
      <a-col :span="6">
        <span class="vy-sign"></span>
        <span class="vy-title">{{ title }}</span>
      </a-col>
      <a-col :span="16">&nbsp;</a-col>
      <a-col :span="2" style="text-align:right;">
        <a-button type="link" style="padding:0;" @click="click_del_work"
          >删除</a-button
        >
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <!-- 富文本编辑器 -->
        <ckeditor
          :editor="editor"
          :config="editorConfig"
          v-model="source.content"
        ></ckeditor>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import CKEditor from "@ckeditor/ckeditor5-vue2";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import zh from "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js";
import upload from "../../../../../../public/upload";

export default {
  name: "vy-cmp-work-content-editor",
  props: ["title", "index", "source"],
  data() {
    return {
      //ck设置
      editor: ClassicEditor,
      editorConfig: {
        language: { ui: "zh-cn", content: "zh-cn" },
        axios: this.$axios,
        extraPlugins: [upload.MyCustomUploadAdapterPlugin],
      },
    };
  },
  components: {
    ckeditor: CKEditor.component,
  },
  methods: {
    // 删除当前作业
    click_del_work() {
      this.$emit("del_work_content", this.index);
    },
  },
};
</script>
<style lang="scss">
.vy-cmp-work-content-editor {
}
</style>
